<template>
  <div>
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      :collapse="props.Cicon" 
      router="true"
    >
      <div class="logo">
        <span v-if="!props.Cicon">LIMS</span>
      </div>
      <template v-for="item in MenuArry" :key="item.path">
      <!--      分为两种方式渲染：有子菜单和没有子菜单-->
      <el-sub-menu
          :index="item.path"
          v-if="item.nodeType == 1"
      >
        <template #title>
        <el-icon><component :is="item.icon"></component></el-icon>
          <span>{{ item.meunname }}</span>
        </template>
        <!--        有子菜单的继续遍历-->
        <el-menu-item-group>
            <el-menu-item
              v-for="(subItem, subIndex) in item.children"
              :index="subItem.path"
              :key="subIndex"
              >{{ subItem.name }}</el-menu-item
            >
          </el-menu-item-group>
      </el-sub-menu>
      <!--      没有子菜单-->
      <el-menu-item :index="item.path" v-if="item.nodeType==2">
        <el-icon><component :is="item.icon"></component></el-icon>
        <span>{{ item.meunname }}</span>
      </el-menu-item>
    </template>
</el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { MenuList } from "../../config/MenuList";
import { Link } from "@element-plus/icons-vue";
const MenuArry = ref(MenuList);

const props = defineProps<{
  Cicon: boolean;
}>();


</script>

<style lang="less" scoped>
.logo {
  text-align: center;
  height: 80px;
  span {
    font-size: 50px;
    color: #fff;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 220px;
  min-height: 400px;
}
.el-menu {
  background-color: #000000;
}
.el-sub-menu__title i {
  color: #fff;
}
.el-menu-item i{
  color: #fff;
}
/deep/.el-sub-menu__title {
  color: #fff;
}
.el-menu-item{
  color: #fff;
}
</style>
